<template>
  <div class="container">
    <div>
      <div id="chart" ref="chart" />
      <button @click="setData">更新数据</button>
    </div>
    <div id="map" ref="map" />
  </div>
</template>

<script>
import * as echarts from 'echarts'
import chinaData from '@/data/china.json' // 导入数据，datav
echarts.registerMap('china1', chinaData) // 注册地图 在初始化实例之前
// import csData from '@/data/cs.json'
export default {
  data() {
    return {
      myChart: null, // 实例
      option: { // 配置项
        title: {
          text: 'ECharts 入门示例'
        },
        tooltip: {},
        xAxis: {
          data: ['衬衫', '羊毛衫', '雪纺衫', '裤子', '高跟鞋', '袜子']
        },
        yAxis: {},
        series: [{
          name: '销量',
          type: 'bar',
          data: [5, 20, 36, 10, 10, 20]
        }]
      },
      mapOption: {
        backgroundColor: '#404a59',
        tooltip: {
          trigger: 'item'
        },
        series: [{
          type: 'map',
          map: 'china1'
        }]
        // geo: {
        //   map: 'china1', // 地图名称 要与注册的名称保持一致
        //   // 高亮 hover的配置
        //   emphasis: {
        //     label: {
        //       show: false
        //     },
        //     itemStyle: {
        //       areaColor: 'red'
        //     }
        //   },
        //   // 常规配置
        //   itemStyle: {
        //     areaColor: 'skyblue',
        //     borderColor: 'red'
        //   }
        // }
      }
    }
  },
  watch: {
    option: {
      handler() {
        this.setOption(this.option) // 更新数据
      },
      deep: true
    }
  },
  mounted() {
    this.myChart = echarts.init(this.$refs.chart) // 初始实例
    this.setOption(this.option) // 更新数据
    window.addEventListener('resize', this.resize)

    // echarts.registerMap('cs', csData)
    const mapChart = echarts.init(this.$refs.map)
    mapChart.setOption({
      ...this.mapOption
    })
  },
  destroyed() {
    // 移除监听事件
    window.removeEventListener('resize', this.resize)
  },
  methods: {
    resize() {
      this.myChart.resize() // 手动触发resize
    },
    setOption(option) {
      this.myChart.setOption(option) // 图表更新
    },
    setData() {
      this.option.series[0].data = [10, 5, 16, 30, 20, 40] // 数据更新 -> 图表更新
    }
  }
}
</script>

<style scoped>
.container{
    display: flex;
}
#chart {
    width: 30vw;
    height: 400px;
}
#map{
    width: 60vw;
    height: 500px;
    background: yellowgreen;
}
</style>
